 {include file="public/user_header" title="邀请返利" /}

<div class="container-xxl flex-grow-1 container-p-y">

              <div class="row mb-4 g-3">
                <div class="col-sm-6 col-xl-3">
                  <div class="card">
                    <div class="card-body">
                      <div class="d-flex align-items-center justify-content-between">
                        <div class="content-left">
                          <h3 class="mb-0">¥{$data.aff_money}</h3>
                          <small>总 分 成</small>
                        </div>
                        <span class="badge bg-label-primary rounded-circle p-2">
                          <i class="bx bx-dollar bx-sm"></i>
                        </span>
                      </div>
                    </div>
                  </div>
                </div>
                <div class="col-sm-6 col-xl-3">
                  <div class="card">
                    <div class="card-body">
                      <div class="d-flex align-items-center justify-content-between">
                        <div class="content-left">
                          <h3 class="mb-0">¥{$data.aff_today_money}</h3>
                          <small>今 日 分 成</small>
                        </div>
                        <span class="badge bg-label-success rounded-circle p-2">
                          <i class="bx bx-gift bx-sm"></i>
                        </span>
                      </div>
                    </div>
                  </div>
                </div>
                <div class="col-sm-6 col-xl-3">
                  <div class="card">
                    <div class="card-body">
                      <div class="d-flex align-items-center justify-content-between">
                        <div class="content-left">
                          <h3 class="mb-0">{$data.aff_people}</h3>
                          <small>邀 请 人 数</small>
                        </div>
                        <span class="badge bg-label-danger rounded-circle p-2">
                          <i class="bx bx-user bx-sm"></i>
                        </span>
                      </div>
                    </div>
                  </div>
                </div>
                <div class="col-sm-6 col-xl-3">
                  <div class="card">
                    <div class="card-body">
                      <div class="d-flex align-items-center justify-content-between">
                        <div class="content-left">
                          <h3 class="mb-0">{$data.aff_percentage}%</h3>
                          <small>分 成 比 例</small>
                        </div>
                        <span class="badge bg-label-info rounded-circle p-2">
                          <i class="bx bx-infinite bx-sm"></i>
                        </span>
                      </div>
                    </div>
                  </div>
                </div>
              </div>

              <div class="row mb-4 g-4">
                <div class="col-lg-7">
                  <div class="card h-100">
                    <div class="card-body">
                      <h5 class="mb-1">如何使用</h5>
                      <p class="mb-4">只需 3 个简单步骤即可获取您的分成.</p>
                      <div class="d-flex flex-column flex-sm-row justify-content-between text-center gap-3">
                        <div class="d-flex flex-column align-items-center">
                          <span
                            ><i
                              class="bx bxs-paper-plane text-primary bx-md p-3 border border-primary rounded-circle border-dashed mb-0"></i
                          ></span>
                          <p class="mt-3 mb-2 w-75">复制您的推广链接</p>
                        </div>
                        <div class="d-flex flex-column align-items-center">
                          <span
                            ><i
                              class="bx bxs-user-badge text-primary bx-md p-3 border border-primary rounded-circle border-dashed mb-0"></i
                          ></span>
                          <p class="mt-3 mb-2 w-75">让用户用您的链接注册</p>
                        </div>
                        <div class="d-flex flex-column align-items-center">
                          <span
                            ><i
                              class="bx bx-rocket text-primary bx-md p-3 border border-primary rounded-circle border-dashed mb-0"></i
                          ></span>
                          <p class="mt-3 mb-2 w-75">等待返利即可,起飞 芜湖~~</p>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>

                <div class="col-lg-5">
                  <div class="card h-100">
                    <div class="card-body">
                      <form class="referral-form" onsubmit="return false">
                        <div class="mb-4 mt-1">
                          <h5>上级ID</h5>
                          <div class="d-flex flex-wrap flex-lg-nowrap gap-3 align-items-end">
                            <div class="w-75">
                              <label class="form-label mb-0" for="referralEmail"
                                >展示你的上级用户是谁</label
                              >
                              <input
                                type="text"
                                class="form-control w-100"
                                value="{:$data.affID}" 
                                disabled/>
                            </div>
                            <div class="d-flex">
                                <button type="submit" class="btn btn-primary" data-clipboard-text="{:$data.affID}" id="copy_id">复 制 ID</button>
                            </div>
                          </div>
                        </div>
                      </form>
                                              <div>
                          <h5>分享推荐链接</h5>
                          <div class="d-flex flex-wrap flex-lg-nowrap gap-3 align-items-end">
                            <div class="w-75">
                              <label class="form-label mb-0" for="referralLink"
                                >在社交网络上分享您的邀请链接</label
                              >
                              <input
                                type="text"
                                class="form-control w-100"
                                value="{$data.aff_url}" 
                                disabled/>
                            
                            </div>
                            <div class="d-flex">
                                <button type="submit" class="btn btn-primary" data-clipboard-text="{$data.aff_url}" id="copy_link">复制链接</button>
                            </div>
                          </div>
                        </div>
                    </div>
                  </div>
                </div>
              </div>

              <!-- Referral List Table -->
              <div class="card">
                <div class="card-datatable table-responsive">
                  <table class="datatables-referral table border-top">
                    <thead>
                      <tr>
                        <th>用户ID</th>
                        <th>注册时间</th>
                      </tr>
                    </thead>
                  </table>
                </div>
              </div>
            </div>
{include file="public/user_footer" /}
<script>
layui.use([ 'jquery'], function () {
            var $ = layui.jquery;
            var datatables_referral = $('.datatables-referral');
            // DataTable
            // --------------------------------------------------------------------
            if (datatables_referral.length) {
    var dt_user = datatables_referral.DataTable({
      ajax: '/My/affInfo',
      columns: [
        { data: 'id' },
        { data: 'create_time' },
      ],
      order: [[0, 'asc']],
      dom:
        '<"card-header d-flex flex-column flex-sm-row pb-md-0 align-items-start align-items-sm-center pt-md-2"<"head-label"><"d-flex align-items-sm-center justify-content-end mt-2 mt-sm-0"l<"dt-action-buttons"B>>' +
        '>t' +
        '<"row mx-2"' +
        '<"col-sm-12 col-md-6"i>' +
        '<"col-sm-12 col-md-6"p>' +
        '>',
      language: {
        sLengthMenu: '_MENU_'
      },
      // For responsive popup
      responsive: {
        details: {
          display: $.fn.dataTable.Responsive.display.modal({
            header: function (row) {
              var data = row.data();
              return 'Details of ' + data['user'];
            }
          }),
          type: 'column',
          renderer: function (api, rowIdx, columns) {
            var data = $.map(columns, function (col, i) {
              return col.title !== '' // ? Do not show row in modal popup if title is blank (for check box)
                ? '<tr data-dt-row="' +
                    col.rowIndex +
                    '" data-dt-column="' +
                    col.columnIndex +
                    '">' +
                    '<td>' +
                    col.title +
                    ':' +
                    '</td> ' +
                    '<td>' +
                    col.data +
                    '</td>' +
                    '</tr>'
                : '';
            }).join('');

            return data ? $('<table class="table"/><tbody />').append(data) : false;
          }
        }
      }
    });
    $('div.head-label').html('<h5 class="card-title text-nowrap mb-2 mb-sm-0">推 荐 用 户</h5>');
    $('.dataTables_length').addClass('mt-0 mt-md-3 me-3');
    $('.dt-action-buttons').addClass('pt-0');
    // To remove default btn-secondary in export buttons
    $('.dt-buttons > .btn-group > button').removeClass('btn-secondary');
  }
        });

 $("#copy_id").click(function () {
                clipboard = new ClipboardJS('#copy_id');
                clipboard.on('success', function(e) {
                    Swal.fire({
                        icon: 'success',
                        title: '复制成功',
                        customClass: {
                          confirmButton: 'btn btn-success'
                        }
                    });
                });
                
                clipboard.on('error', function(e) {
                    Swal.fire({
                        icon: 'error',
                        title: '复制失败,请手动复制',
                        customClass: {
                          confirmButton: 'btn btn-danger'
                        }
                    });
                });
            });
    //Copy Api Info
            $("#copy_link").click(function () {
                clipboard = new ClipboardJS('#copy_link');
                clipboard.on('success', function(e) {
                    Swal.fire({
                        icon: 'success',
                        title: '复制成功',
                        customClass: {
                          confirmButton: 'btn btn-success'
                        }
                    });
                });
                
                clipboard.on('error', function(e) {
                    Swal.fire({
                        icon: 'error',
                        title: '复制失败,请手动复制',
                        customClass: {
                          confirmButton: 'btn btn-danger'
                        }
                    });
                });
            });
</script>